<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>酷狗音乐精选歌单效果</title>
    <style>
      /*  */
      body,
      p,
      h4{
        margin: 0;
        padding: 0;
      }
      /*  */
      .music {
        height: 480px;
        width: 480px;
        margin: 50px auto 0;
        position: relative;
        a {
          height: 480px;
          width: 480px;
          display: block;
        }
        .music_number {
          height: 35px;
          width: 200px;
          background-image: linear-gradient(
            to right,
            rgba(255, 255, 255, 0),
            rgba(0, 0, 0, 0.5)
          );
          position: absolute;
          top: 0;
          right: 0;
          span {
            height: 35px;
            /* display: inline-block; */
            float: right;
            line-height: 35px;
            margin-right: 10px;
          }
          span.music_image {
            background: url(images/earphone.svg) no-repeat center;
            background-size: 20px;
            width: 35px;
          }
          span.music_font {
            font-size: 14px;
            color: #fff;
            margin-right: 20px;
          }
        }
        .music_title {
          height: 80px;
          width: 100%;
          position: absolute;
          bottom: 0;
          background-color: rgba(0,0, 0, 0.5);
          h4,p{
            color: #fff;
            text-indent: 1em;
            font-weight: 100;
          }
          h4{
            line-height: 40px;
            font-size: 16px;
          }
          p{
            font-size: 14px;
            line-height: 30px;
          }
        }
        .music_mask{
          position: absolute;
          background-color: rgba(0, 0, 0, 0.5);
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          display: none;
        }
        .music_maskButton{
          height: 36PX;
          width: 36PX;
          background: url(images/play-button.svg) no-repeat;
          position: absolute;
          bottom: 22px;
          right: 22px;
          display: none;
        }
        a:hover .music_mask,a:hover .music_maskButton{
          display: block;
        }
      }
    </style>
  </head>
  <body>
    <div class="music">
      <a href="#">
        <img src="images/kugou-img1.jpg" alt="" />
     
        <p class="music_number">
          </span><span class="music_font">679.5万</span><span class="music_image"></span>
        </p>
        <div class="music_title">
          <h4>乡村之旅：案件惬意.与自然同在</h4>
          <p>莫若</p>
        </div>
        <div class="music_mask"></div>
        <div class="music_maskButton"></div>
      </a>
    </div> 
  </body>
</html>
